<template>
  <div class="scroll" @scroll="handleScroll" ref="scroll" :style="{height}">
      <ul class="tag">
          <li class="tag-item"
					v-for="(item, index) in list"
					:key="index"
					:class="active === item.id ? 'active': ''"
					@click.stop="jumpTo(index)">{{item.name}}</li>
      </ul>
			<div class="scroll-content">
				<slot></slot>
			</div>
  </div>
</template>
<script>
	import { debounce } from 'lodash'
  export default {
    name: 'scrollPosition',
    props: {
			list: {type: Array, default: function () {
					return []
			}},
			height: {type: String, default: ''},
			// 修成参数
			revise: {type: Number, default: 0}
    },
    data () {
      return {
				active: ''
      }
    },
    components:{
    },
    computed: {
    },
    methods: {
			jumpTo (index) {
				let scroll = this.$refs.scroll
				if (scroll) {
					let offsetTopArr = this.list.map((item) => {
						return scroll.querySelector('#'+ item.id).offsetTop
					})
					scroll.scrollTop = offsetTopArr[index] + this.revise
				}
			},
			handleScroll: debounce(function(event) {
				let target = event.target
				let scrollTop = target.scrollTop + 30
				let offsetTopArr = this.list.map((item) => {
					return target.querySelector('#'+ item.id).offsetTop + this.revise
				})
				offsetTopArr.push(Infinity)
				for (let i = 0; i< this.list.length; i++) {
					if (scrollTop>= offsetTopArr[i] && scrollTop<= offsetTopArr[i + 1]) {
						this.active = this.list[i].id
						return 
					}
				}
			}, 100) 
		},
    mounted () {
			this.active = this.list[0].id
		},
    watch: {
    }
  }
</script>
<style lang="stylus" scoped>
	@import "../../../../assets/common.styl" 
	.scroll
		overflow-y auto
		position relative
	.scroll-content
		padding-right 200px
		box-sizing border-box
	.tag	
		position fixed
		right 55px
		top 120px
		.tag-item
			line-height 32px
			font-size 12px
			color $cf-gray0
			cursor pointer
			&:before
				content ""
				display inline-block
				height 32px
				width 2px
				float left
				margin-right 10px
				background-color $c-border2
		.tag-item.active
			color $c-main	
			&:before
				background-color $c-main	
</style>